<?php
require_once("Includes/connection.php");
require_once("Includes/functions.php");
session_start();
if(isset($_SESSION['username'])){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />

<style type="text/css"> 

li {
  display:inline;
}
h1{
text-shadow: 7px 7px 7px white; 
 }
#maindiv{ 
width:650px;

background-color:white;
margin-left:20px;

}
#dropbox{
width:100px;
height:100px;
text-align:center;
color: black;
background-color:#FC0;


border: 1px solid black;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;

}
#twodiv{
margin-bottom: 480px;
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
  color:black;
}


#boxes #dialog2 {
  background:url(notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
#botones{
margin-bottom:450px;
}
</style>

<!--script src="JS/scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="JS/scriptaculous/src/scriptaculous.js" type="text/javascript"></script-->
<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript"
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
	
	<script type="text/javascript" src="jquery.tagcloud.js"></script>
	<script type="text/javascript" src="jquery.tagcloud.min.js"></script>
	<script type="text/javascript" src="jquery.tinysort.min.js"></script>
	<script type="text/javascript" src="contextmenu.js"></script>

<title>Q&A </title>
<style type="text/css">
.tag_cloud { padding: 3px; text-decoration: none; color: #81d601;}
.tag_cloud:hover { color: #ffffff; background: #69da03; }
.tag_cloud:active { color: #ffffff; background: #ACFC65; }
</style>
</head>
<body>
	<table id="header">
    <tr><td></td>
    <td colspan="2" style="width:1000px; text-align:center;">
    	<table><tr><td width="180">
    	<img src="images/logo_qanda.gif" height="80"/>
		</td><td>
        <h1 style="height:auto;">ACM RUM Q&A </h1>
		</td></tr></table>
    </td>
    <td></td></tr>
    <tr><td style="border-bottom:1px solid black;"></td><td style="width:180px;"></td><td style="border-bottom:1px solid black; width:813px;"></td><td style="border-bottom:1px solid black;"></td></tr>
    </table>
    <table id="container">
        <tr>
        <td style="border-left:1px solid black; border-right:1px solid black; width:176px; height:30px; padding-top:10px; padding-left:5px; background-color:#FC0;">
        <a href="home.php">Home</a>
        </td><td rowspan="6" style="border-right:1px solid #CCC; border-bottom:1px solid #CCC;  padding-top:15px;">
            <table id="main_content">
            <tr>
			<!--tagcloud HERE!-->
	
 <td>            							
<div id="maindiv"> <div style="display:none" align="center" id="dialog_box"></div></div>
</td>
 <td>
  <!--third column-->
 <div id="twodiv"> <DIV id="dropbox"><b>Trash Can</b></DIV></br> <div id="buttons"><!--first column-->
<form id="botones"> 

<input id="default" type="button" value="default" /></br>

<input id="spherical" type="button" value="spherical"/></br>
<!--input id="power" type="button" value="power"/></br-->
<input id="tube_like" type="button" value="tube_like"/></br>
<input id="list" type="button"  value="list"/></br>
<!--input id="seed" type="button" value="seed"/></br>
<input id="size_height" type="button" value="size_height"/></br>
<input id="color" type="button" value="color"/></br--->
</form>
</div></div>
 
 	</td></tr>
			</td>
			</tr> 
            </table><!--visible non dynamic content Ends Here-->
			<div id="boxes">

<!-- Start of Sticky Note -->
<div id="dialog2" class="window">
   <b>Please input your new value:</b>
   <input value="" id="forma" type="text" /> <br/><br/>
   <input type="button" id="buton" value="Done"/>
<input type="button" value="Close it" class="close"/>
</div>
<!-- End of Sticky Note -->

<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>

<div id="add" style="display:none">

		<li id="simple"></li>
</div>  
<div id="pos"></div>


 <div class="contextMenu" id="myMenu1">


<ul>
       <li id="edit"> <img src="edit.png" /> Edit</li>
		
</ul>
    </div>
			<!--tagcloud ENDS HERE!-->
        </td></tr>
        <tr><td style="border-left:1px solid black; border-right:1px solid black; width:176px; height:30px; padding-left:5px; background-color:#FC0;">
        <a href="create_poll.php">Create Poll</a>
        </td></tr>
        <tr><td style="border:1px solid black; border-right:none; background-color:#FFF; width:176px; height:30px; padding-left:5px;">
        <a href="view_polls.php">View Polls</a>
        </td></tr>
        <tr><td style="border-left:1px solid black; border-right:1px solid black; width:176px; height:30px; padding-left:5px; background-color:#FC0;">
        <a href="manage_accounts.php">Manage Accounts</a>
        </td></tr>
        <tr><td style="border-left:1px solid black; border-right:1px solid black; width:176px; height:30px; padding-left:5px; background-color:#FC0;">
        <a href="index.php">Logout</a>
        </td></tr>
        <tr><td style="border:1px solid black; border-top:none; width:176px; padding-left:5px; background-color:#FC0;">
        </td>
        </tr>
    </table>
</body>
</html>

<SCRIPT ="text/javascript"> 


	 
	 $(document).ready(function() {///////////////////////Jquery script///////////////////////////////////
	 
	
	var num=0;
		
 
  $("#dropbox").droppable({
      drop: function(event, ui){
			$(ui.draggable).hide( "explode").remove();
			
			
			}
			});
			
    $("#maindiv").mousemove(function(e){
	
		var relativeXPosition = (e.pageX - this.offsetLeft); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
	
		var relativeYPosition = (e.pageY - this.offsetTop);
		$("#pos").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
	}).mouseout(function(){
		$("#pos").html("<p>Move mouse on the main container to get relative coordinates! :)</p>")
    });
	
	//-------------------Button Functions----------------------
	$('#default').click(function(){			//default tagcloud type:cloud
	$("#maindiv").css({'width':'650px'}).tagcloud({height:600});});

$('#list').click(function(){
//list tagcloud (ERROR: has no method set set_Array) When Activated it damages all the other tagcloud models
$("#maindiv").css({'width':'650px'}).tagcloud({height:600,type:"list",sizemin:8}).find("li").tsort();
});

$('#spherical').click(function(){ //spherical tagcloud    (ERROR: has no method set set_Array)
/*$("#maindiv>li").tsort({order:"rand"});*/
$("#maindiv").css({'width':'650px'}).tagcloud({height:600,type:"sphere",sizemin:8});});
/*
$('#power').click(function(){   //power tagcloud   
$("#maindiv").tagcloud({height:600,type:"sphere",sizemin:8,sizemax:26,power:.3});});*/

$('#tube_like').click(function(){ //tubelike tagcloud  (ERROR: has no method set set_Array)
/*$("#maindiv>li").tsort({attr:"value"});*/
$("#maindiv").css({'width':'650px'}).tagcloud({height:600,type:"sphere",/*sizemin:3,sizemax:26,*/power:.3});});
/*
$('#seed').click(function(){ //seed test cloud   
$("#maindiv").tagcloud({height:600,seed:23});});

$('#size_height').click(function(){ //test size and height of cloud
$("#maindiv").tagcloud({height:600,sizemin:12,sizemax:32});});

$('#color').click(function(){ //test color of cloud 
$("#maindiv").tagcloud({height:600,colormin:"d88",colormax:"0a0"});});
*/

  //--------------------------------------XML READING WITH JQUERY------------------------------------------------>

  
$.ajax({
		type: "GET",
		url: "xml_simple.php?short_name=<?php echo $_GET['short_name'];?>",
		dataType: "xml",
		success: function(xml) {
		
			$(xml).find('entry').each(function(){           //FIND EVERY ANSWER TAG and print its text maindiv divbox
			
			
		var color = 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
		var TIMES = $(this).find('times').text()
		//var INT_TIMES = parseInt(TIMES);
		//$(this).find('answer').text()
		var min_font_size = 8;
		var DYNAMIC_SIZE = min_font_size + (TIMES*10);      //changes word size depending times repeated
		var SIZE = DYNAMIC_SIZE + "pt";
		//alert(SIZE);
		
		
		var simple = $('#add').html();
		dynamic_num = "word" + num;
		
		
	//DYNAMIC OBJECT CREATION			//Eliminate .attr(value) to get desired tagcloud
		$('#maindiv').append($(simple).draggable().attr({'id':dynamic_num,/*'value':num,*/'title':$(this).find('answer').text() +" returned a count of "+TIMES}).mousedown(function(){
		this.onselectstart = function () { return false; }; //fix to eliminate select cursor on drag
		$(this).css({'cursor': 'pointer', 'cursor': 'hand'})/*.fadeOut(200).fadeIn(300)*/;
		return false;
	
	}).contextMenu('myMenu1', {

      bindings: {
        'edit': function(t) {
		//////////////////////////////////////////////////////onclick
		//Cancel the link behavior
		//e.preventDefault();
		
		//Get the A tag
		var id = "#boxes #dialog2"//$(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();      
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	//transition effect
		$(id).fadeIn(2000); 
	//if close button is clicked
	$('.window .close').click(function () {
	
		//Cancel the link behavior
		//e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	});		
	//if Done button is clicked
	 
	 $('#buton').click(function() {
      
    $('.window #forma').val(function(i, val) {
      return val;
    });
   // alert($('#forma').val());
  var object_HTML = t.innerHTML;
		//$('#dialog_box').html(object_HTML).css({'display':'inline','color':'black'});
		//alert(object_HTML);
		//alert($('#forma').val());
		t.innerHTML = $('#forma').val()
		//alert(t.innerHTML);
		
		
	//e.preventDefault();
	$('#mask').hide();
	$('.window').hide();
		
		/*}
		else
		{
		e.preventDefault();
	$('#mask').hide();
	$('.window').hide();
	}*/
	});
		
	
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});	
	}}})
	

	.hover(function() {$(this).css({'text-shadow': '2px 2px 2px red','cursor': 'pointer', 'cursor': 'hand'});}, function(){
	$(this).css({'text-shadow':'none'});}).css({'color':color,'font-size': SIZE}).html($(this).find('answer').text()));
		num= num +1;
			
				});
		}
	});


});  //End of $(document).ready()
  </SCRIPT> 
  
  <?php 
}
else{
	header('Location: index.php');
}
?>
